<!--角色ID
0 管理员
1 学生
2 教师
3 教务员
-->

<script setup>

import {Icon} from '@iconify/vue'
import {useRoute} from "vue-router";

const props = defineProps(['role'])

const links = [
  {
    icon: 'ep:home-filled',
    url: '/',
    name: '首页',
    allowedRoles: [0, 1, 2, 3]
  },
  {
    icon: 'ep:avatar',
    name: '人员管理',
    allowedRoles: [0, 3],
    subLinks: [
      {
        url: '/personnel/student',
        name: '学生信息管理',
        allowedRoles: [0, 3]
      },
      {
        url: '/personnel/teacher',
        name: '教师信息管理',
        allowedRoles: [0, 3]
      },
      {
        url: '/personnel/staff',
        name: '教务员信息管理',
        allowedRoles: [0]
      }
    ]
  },
  {
    icon: 'ep:suitcase-line',
    name: '教学管理',
    allowedRoles: [0, 2, 3],
    subLinks: [
      {
        name: '班级管理',
        url: '/affair/class',
        allowedRoles: [0, 3]
      },
      {
        name: '课程管理',
        url: '/affair/course',
        allowedRoles: [0, 3]
      },
      {
        name: '考试管理',
        url: '/affair/exam',
        allowedRoles: [0, 2, 3]
      }
    ]
  },
  {
    icon: 'ep:list',
    name: '成绩管理',
    allowedRoles: [0, 1, 2, 3],
    subLinks: [
      {
        name: '成绩查询',
        url: '/affair/score/query',
        allowedRoles: [1]
      },
      {
        name: '成绩录入',
        url: '/affair/score/entry',
        allowedRoles: [0, 2, 3]
      }
    ]
  }
]

const route = useRoute();
const onRoutes = computed(() => {
  return route.path
})

onMounted(()=>{
  console.log("child role: "+props.role)
})
</script>

<template>
  <div class="sidebar">
    <el-menu
        :default-active="onRoutes"
        unique-opened
        router
    >
      <template v-for="link in links">
        <template v-if="link.subLinks">
          <el-sub-menu v-if="-1 !== link.allowedRoles.indexOf(props.role)" :index="link.name">
            <template #title>
              <el-icon>
                <Icon :icon="link.icon"></Icon>
              </el-icon>
              <span>{{ link.name }}</span>
            </template>
            <template v-for="subLink in link.subLinks">
              <el-menu-item v-if="-1 !== subLink.allowedRoles.indexOf(props.role)" :index="subLink.url">
                <span>{{ subLink.name }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item v-if="-1 !== link.allowedRoles.indexOf(props.role)" :index="link.url">
            <el-icon>
              <Icon :icon="link.icon"></Icon>
            </el-icon>
            <span>{{ link.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<style scoped>

</style>